<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>辅导员端 - 假期去向告知</title>
  <link rel="stylesheet" href="../css/style.css">
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <style>
    .holiday-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .holiday-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
    }

    .holiday-title {
      font-size: 24px;
      color: #007bff;
      margin: 0;
    }

    .holiday-filter {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .filter-btn {
      padding: 8px 16px;
      background-color: #e9f5ff;
      color: #007bff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .filter-btn.active, .filter-btn:hover {
      background-color: #007bff;
      color: white;
    }

    .holiday-stats {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
    }

    .stat-card {
      background-color: white;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .stat-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }

    .icon-home {
      background-color: #e6f7ff;
      color: #007bff;
    }

    .icon-stay {
      background-color: #e6ffed;
      color: #28a745;
    }

    .icon-travel {
      background-color: #fff3e6;
      color: #ffc107;
    }

    .icon-other {
      background-color: #fce9e9;
      color: #dc3545;
    }

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      margin: 5px 0;
    }

    .stat-label {
      font-size: 14px;
      color: #666;
    }

    .chart-container {
      background-color: white;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .class-distribution {
      background-color: white;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .distribution-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .search-box {
      display: flex;
      gap: 5px;
    }

    .search-box input {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      flex: 1;
    }

    .search-box button {
      padding: 8px 15px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .class-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    .class-table th, .class-table td {
      padding: 12px 15px;
      border: 1px solid #eee;
      text-align: left;
    }

    .class-table th {
      background-color: #f8f9fa;
      font-weight: 500;
    }

    .class-table tr:hover {
      background-color: #f9f9f9;
    }

    .status-tag {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
    }

    .status-home {
      background-color: #e6f7ff;
      color: #007bff;
    }

    .status-stay {
      background-color: #e6ffed;
      color: #28a745;
    }

    .status-travel {
      background-color: #fff3e6;
      color: #ffc107;
    }

    .status-other {
      background-color: #fce9e9;
      color: #dc3545;
    }

    @media (max-width: 768px) {
      .holiday-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .holiday-stats {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  </style>
</head>
<body>
<div class="nav">
  <a href="custom_send.html">自定义发送</a>
  <a href="survey_template.html">问卷模板管理</a>
  <a href="survey_view.html">问卷查阅情况</a>
  <a href="holiday_report.html">假期去向告知</a>
  <a href="family_chat.html">亲属对话管理</a>
  <a href="../index.html">退出登录</a>
</div>

<div class="container">
  <h3>假期去向告知</h3>

  <div class="holiday-container">
    <div class="holiday-header">
      <h4 class="holiday-title">2025年暑假学生去向统计</h4>
      <div class="holiday-filter">
        <button class="filter-btn active" data-holiday="summer">暑假</button>
        <button class="filter-btn" data-holiday="winter">寒假</button>
        <button class="filter-btn" data-holiday="national">国庆</button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="holiday-stats">
      <div class="stat-card">
        <div class="stat-icon icon-home">
          <i class="fa fa-home"></i>
        </div>
        <div class="stat-value" id="homeCount">30</div>
        <div class="stat-label">回家</div>
      </div>

      <div class="stat-card">
        <div class="stat-icon icon-stay">
          <i class="fa fa-building"></i>
        </div>
        <div class="stat-value" id="stayCount">10</div>
        <div class="stat-label">留校</div>
      </div>

      <div class="stat-card">
        <div class="stat-icon icon-travel">
          <i class="fa fa-plane"></i>
        </div>
        <div class="stat-value" id="travelCount">5</div>
        <div class="stat-label">旅行</div>
      </div>

      <div class="stat-card">
        <div class="stat-icon icon-other">
          <i class="fa fa-question"></i>
        </div>
        <div class="stat-value" id="otherCount">2</div>
        <div class="stat-label">其他</div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="chart-container">
      <h4>假期去向分布</h4>
      <canvas id="holidayChart" height="250"></canvas>
    </div>

    <!-- 班级分布 -->
    <div class="class-distribution">
      <div class="distribution-header">
        <h4>各班级去向详情</h4>
        <div class="search-box">
          <input type="text" placeholder="搜索班级...">
          <button><i class="fa fa-search"></i></button>
        </div>
      </div>

      <table class="class-table">
        <thead>
        <tr>
          <th>班级</th>
          <th>回家</th>
          <th>留校</th>
          <th>旅行</th>
          <th>其他</th>
          <th>总计</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>高一(1)班</td>
          <td><span class="status-tag status-home">12</span></td>
          <td><span class="status-tag status-stay">3</span></td>
          <td><span class="status-tag status-travel">2</span></td>
          <td><span class="status-tag status-other">1</span></td>
          <td>18</td>
        </tr>
        <tr>
          <td>高一(2)班</td>
          <td><span class="status-tag status-home">10</span></td>
          <td><span class="status-tag status-stay">4</span></td>
          <td><span class="status-tag status-travel">1</span></td>
          <td><span class="status-tag status-other">0</span></td>
          <td>15</td>
        </tr>
        <tr>
          <td>高二(1)班</td>
          <td><span class="status-tag status-home">8</span></td>
          <td><span class="status-tag status-stay">2</span></td>
          <td><span class="status-tag status-travel">2</span></td>
          <td><span class="status-tag status-other">1</span></td>
          <td>13</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 假期数据
    const holidayData = {
      summer: {
        home: 30,
        stay: 10,
        travel: 5,
        other: 2
      },
      winter: {
        home: 35,
        stay: 8,
        travel: 3,
        other: 1
      },
      national: {
        home: 20,
        stay: 12,
        travel: 7,
        other: 3
      }
    };

    // 当前选中的假期
    let currentHoliday = 'summer';

    // 初始化图表
    function initChart() {
      const ctx = document.getElementById('holidayChart').getContext('2d');

      // 销毁已存在的图表
      if (window.holidayChart) {
        window.holidayChart.destroy();
      }

      // 创建新图表
      window.holidayChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['回家', '留校', '旅行', '其他'],
          datasets: [{
            data: [
              holidayData[currentHoliday].home,
              holidayData[currentHoliday].stay,
              holidayData[currentHoliday].travel,
              holidayData[currentHoliday].other
            ],
            backgroundColor: [
              '#007bff',
              '#28a745',
              '#ffc107',
              '#dc3545'
            ],
            borderWidth: 0
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'right',
              labels: {
                boxWidth: 12,
                padding: 15
              }
            },
            tooltip: {
              callbacks: {
                label: function(context) {
                  const label = context.label || '';
                  const value = context.raw || 0;
                  const total = context.dataset.data.reduce((a, b) => a + b, 0);
                  const percentage = Math.round((value / total) * 100);
                  return `${label}: ${value}人 (${percentage}%)`;
                }
              }
            }
          },
          cutout: '65%'
        }
      });
    }

    // 更新统计卡片
    function updateStatCards() {
      document.getElementById('homeCount').textContent = holidayData[currentHoliday].home;
      document.getElementById('stayCount').textContent = holidayData[currentHoliday].stay;
      document.getElementById('travelCount').textContent = holidayData[currentHoliday].travel;
      document.getElementById('otherCount').textContent = holidayData[currentHoliday].other;
    }

    // 切换假期筛选
    document.querySelectorAll('.filter-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有按钮的激活状态
        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        // 添加当前按钮的激活状态
        this.classList.add('active');
        // 更新当前假期
        currentHoliday = this.dataset.holiday;
        // 更新统计数据和图表
        updateStatCards();
        initChart();
      });
    });

    // 初始化页面
    updateStatCards();
    initChart();
  });
</script>
</body>
</html>
